import React from "react";
import { Modal, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";

type ConfirmModalProps = {
    visible: boolean;
    title?: string;
    message: string;
    onConfirm: () => void;
    onCancle: () => void;
}

const ConfirmModal: React.FC<ConfirmModalProps> = ({ visible, title, message, onConfirm, onCancle }) => {

    return <Modal transparent animationType="fade"
        visible={visible}
        onRequestClose={onCancle}>

        <TouchableWithoutFeedback onPress={onCancle}>
            <View style={styles.overlay}>
                <View style={styles.container}>
                    {title ? (<Text style={styles.title}>{title}</Text>) : null}
                    <Text style={styles.message}>{message}</Text>
                    <View style={styles.buttonRow}>
                        <TouchableOpacity onPress={onCancle} style={[styles.button, styles.cancelButton]}>
                            <Text style={styles.cancelText}>取消</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={onConfirm} style={[styles.button, styles.confirmButton]}>
                            <Text style={styles.confirmText}>确定</Text>
                        </TouchableOpacity>

                    </View>
                </View>
            </View>
        </TouchableWithoutFeedback>
    </Modal>

}

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.4)',
        alignItems: 'center',
        justifyContent: 'center',
    },
    container: {
        width: 280,
        backgroundColor: '#fff',
        borderRadius: 12,
        padding: 20,
        alignItems: 'center',
    },
    title: {
        fontSize: 18,
        fontWeight: '600',
        marginBottom: 20,
        color: '#333'
    },
    message: {
        fontSize: 16,
        fontWeight: '600',
        marginBottom: 26,
        color: '#333',
    },
    buttonRow: {
        width: '100%',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    button: {
        flex: 1,
        paddingVertical: 10,
        alignItems: 'center',
        borderRadius: 8,
    },
    cancelButton: {
        marginRight: 10,
        backgroundColor: '#eee',
    },
    confirmButton: {
        backgroundColor: '#007AFF'
    },
    cancelText: {
        color: '#333',
        fontWeight: '500',
    },
    confirmText: {
        color: '#fff',
        fontWeight: '600',
    }

})

export default ConfirmModal;